import React, { useEffect, useState } from 'react';
import { Breadcrumb, Input, Button, Form, message, Upload } from 'antd';
import '../../../views/Index/BannerAdd/BannerAdd.scss'
import { useNavigate, useParams } from 'react-router-dom'
import * as service from '../../../api/gl'
import { UserOutlined, LockOutlined, PlusOutlined } from '@ant-design/icons'

interface Props {

}

function BannerAdd(props: Props) {

    var onChange = (e: any) => {
        var reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])
        reader.onload = function () {
            // console.log(this.result);
            form.setFieldValue('img', this.result)

        }
    }

    const [form] = Form.useForm();
    const [img, setimg] = useState()

    const navigate = useNavigate()

    const tiao = () => {
        navigate('/index/banner')
    }

    var onChange = (e: any) => {
        var reader = new FileReader()
        reader.readAsDataURL(e.target.files[0])
        reader.onload = function () {
            // console.log(this.result);
            form.setFieldValue('img', this.result)
        }
    }

    const params = useParams()
    const { id } = params
    console.log(id);

    //新增
    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        let pic = formvalues.img[0].thumbUrl

        let { img, ...values } = formvalues
        console.log(values)

        var res = await service.banner_add({ ...values, img:pic, mingcheng: formvalues.mingcheng, name: formvalues.name, time: formvalues.time })
        if (res.status == 201) {
            message.success('添加成功')
            tiao()
        } else {
            message.error('添加失败')
        }
    }

    return (
        <div className='banneradd'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">Banner图管理</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">新建Banner图信息</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>新建Banner图</p>
            </div>
            <div className="xia">
                <span>基础信息</span>
                <div className="foot">
                    <Form
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="mingcheng"
                            label="Banner图名称"
                            rules={[{ required: true, message: '请输入Banner图名称' }]}
                        >
                            <Input placeholder="请输入Banner图名称" />
                        </Form.Item>

                        <Form.Item
                            name="img"
                            label="上传图片"
                            valuePropName="fileList"
                            getValueFromEvent={e => {
                                if (Array.isArray(e)) {
                                    return e;
                                }
                                return e && e.fileList;
                            }}
                        >
                            <Upload
                                action="/api/banneradd"
                                listType="picture-card"
                            >
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: -20 }}>上传图片 </div>
                                </div>
                            </Upload>
                        </Form.Item>


                        {/* <Form.Item
                            name="img1"
                            label="Banner图"
                        // rules={[{ required: true, message: '请添加图片' }]}
                        >
                            <Input type='file' onChange={onChange} />
                        </Form.Item>
                        <p>建议尺寸640*320,小于10M的JPG、PNG格式图片</p>
                        <Form.Item
                            name="img"
                            label="base64"
                        // rules={[{ required: true, message: '请选择图片' }]}
                        >
                            <Input value={img} disabled placeholder="图片上传后自动填充" />
                        </Form.Item> */}
                        <div className="tt">
                            <Form.Item
                                name="name"
                                label="添加人"
                                rules={[{ required: true, message: '请输入添加人' }]}
                            >
                                <Input placeholder="请输入添加人" disabled={form.getFieldValue('adminid')} />
                            </Form.Item>
                        </div>
                        <Form.Item
                            name="time"
                            label="添加时间"
                            rules={[{ required: true, message: '请输入添加时间' }]}
                        >
                            <Input placeholder="请输入添加时间" />
                        </Form.Item>
                        <div className="btn">
                            <Button type="primary" htmlType="submit" >提交</Button>
                            <Button onClick={tiao}>返回</Button>
                        </div>
                    </Form>
                </div>
            </div>
        </div>
    );

}
export default BannerAdd;